import React, { useState, useEffect } from 'react';
import { useSearchParams } from "react-router-dom";
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import { indexSearch } from '../../api/indexApi'

// 关键字染色
import { highlightSearchResult } from '../../math'

// 加载图标样式
const antIcon = (
    <LoadingOutlined
        style={{
            fontSize: 24,
        }}
        spin
    />
);

function Albums() {
    const [searchPool, setSearchPool] = useState([]); // 搜索结果池

    const [loading, setLoading] = useState([]); // 加载状态

    const [searchParams] = useSearchParams(); // 搜索参数
    const s = searchParams.get('s');

    // 搜索专辑，结果赋值到searchPool
    useEffect(() => {
        if (s) {
            setLoading(true)
            indexSearch(s, '10', 20)
                .then((res) => {
                    if (res.data.result.albumCount) {
                        setSearchPool(res.data.result.albums)
                        setLoading(false)
                    } else {
                        setLoading(false)
                    }
                })
                .catch((err) => {
                    console.error(err)
                    setLoading(false)
                })
        } else {
            setLoading(false)
        }
    }, [s]);

    return (
        <div>
            <div className='count'> 搜索"{s}",找到<span>{searchPool.length}</span>张专辑</div>
            {
                loading ? (
                    <Spin indicator={antIcon} tip="Loading"><div className='loadingbox'></div></Spin>
                ) : (
                    <div className='searchAlbumsContainer'>
                        {searchPool.map((item) => {
                            // 艺术家
                            let artists = item.artists.map((a) => { return <span key={a.id} title={a.name} className='linka'>{highlightSearchResult(a.name, s)}</span> })
                            return <li className='searchliAlbums' key={item.id}>
                                <div className='imgbox'>
                                    {/* 播放图标 */}
                                    <div title={item.name} className='playicon'>
                                        <svg t="1678177678762" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11968"><path d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z" p-id="11969"></path></svg>
                                    </div>
                                    {/* 图片 */}
                                    <img src={item.picUrl} />
                                </div>
                                {/* 名字 */}
                                <p className='name ' title={item.name}><span className='linka'>{highlightSearchResult(item.name, s)}</span></p>
                                {/* 艺术家 */}
                                <span className='artists'>{artists}</span>
                            </li>
                        })}
                    </div>
                )
            }
        </div>
    );
}

export default Albums;